import { dom } from '@knno/dom';
import { button } from '@knno/ui/button';
import { bar } from './index.css';
import Person from '@material-design-icons/svg/filled/person.svg';

export function renderButtons() {
	return [
		dom.h2().text('按钮'),
		dom
			.div(bar)
			.append(
				button().type('info').text('普通'),
				button().type('primary').icon(Person).text('主要'),
				button().type('success').text('成功'),
				button().type('warning').text('警告'),
				button().type('danger').text('危险')
			),
		dom
			.div(bar)
			.append(
				button().type('info').disabled(true).text('普通'),
				button().type('primary').disabled(true).icon(Person).text('主要'),
				button().type('success').disabled(true).text('成功'),
				button().type('warning').disabled(true).text('警告'),
				button().type('danger').disabled(true).text('危险')
			),
		dom
			.div(bar)
			.append(
				button().text('普通'),
				button().type('primary-outline').icon(Person).text('主要'),
				button().type('success-outline').text('成功'),
				button().type('warning-outline').text('警告'),
				button().type('danger-outline').text('危险')
			),
		dom
			.div(bar)
			.append(
				button().text('普通').disabled(true),
				button().type('primary-outline').disabled(true).icon(Person).text('主要'),
				button().type('success-outline').disabled(true).text('成功'),
				button().type('warning-outline').disabled(true).text('警告'),
				button().type('danger-outline').disabled(true).text('危险')
			),
	];
}
